<!-- <template>
  <div class="block"  element-loading-text="Loading" v-loading="listLoading">
    <div>
      <span class="label">查询数据</span>
      <el-select class="select" filterable  v-model="currentSelectTag" placeholder="请选择查询数据">
        <el-option
          v-for="item in tags"
          :key="item.address"
          :label="item.desc"
          :value="item.address">
          <span style="float: right; color: #8492a6; font-size: 13px">{{ item.address }}</span>
          <span style="float: left ; color: #1f2d3b; font-size: 13px">{{ item.desc }}</span>
        </el-option>
      </el-select>
      <span class="label">时间范围</span>
      <el-date-picker
        value-format="yyyy-MM-dd HH:mm:ss"
        class="date"
        v-model="currentSelectDate"
        type="datetimerange"
        :picker-options="pickerOptions"
        @change="dateChange()"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        align="right">
      </el-date-picker>
      <el-button :disabled=buttonDisabled class="button" icon="el-icon-zoom-in" @click="handSearch()">查询</el-button>
    </div>
    <chart height="95%" width="100%" />
  </div>
</template>

<script>
import { searchTrend,getTendItem } from '@/api/trend'
import Chart from '@/components/Charts/Line '
export default {
  data() {
      return {
        components: { Chart },
        listLoading: false,
        buttonDisabled: true,
        currentSelectDate: '',
        currentSelectTag: '',
        pickerOptions: {
          shortcuts: [{
            text: '最近一天',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
              picker.$emit('pick', [start, end]);
            }
          },{
            text: '最近二天',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 2);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三天',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近四天',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 4);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近五天',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 5);
              picker.$emit('pick', [start, end]);
            }
          },  {
            text: '最近六天',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        tags: [],
        xAxisData: [],
        seriesData: []

      };
  },
  methods: {
     formatDate(date) {
      const year = date.getFullYear();
      const month = ('0' + (date.getMonth() + 1)).slice(-2);
      const day = ('0' + date.getDate()).slice(-2);
      const hours = ('0' + date.getHours()).slice(-2);
      const minutes = ('0' + date.getMinutes()).slice(-2);
      const seconds = ('0' + date.getSeconds()).slice(-2);
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },



    handSearch(){

      this.listLoading = true
      this.xAxisData = []
      this.seriesData = []

      var currentTime = this.formatDate(new Date())

      if(this.currentSelectTag == '' || this.currentSelectDate[0] == null){
        this.$message({
              type: 'error',
              message: '请选择数据'
            });
        this.listLoading = false
      }if (new Date(this.currentSelectDate[1]) > new Date(currentTime)) {
        this.$message({
          type: 'error',
          message: '超出时间范围'
        });
        this.listLoading = false
      } else {
        searchTrend({
          'currentSelectTag': this.currentSelectTag,
          'currentSelectDate': this.currentSelectDate
        }).then(response => {


          if(response.data.length > 10000){
            this.$message({
              type: 'error',
              message: '访问数据过多,请减少访问数据量'
            });
            this.listLoading = false
          }else{
            var data = response.data
            console.log(data)
            data.forEach(e => {
              this.xAxisData.push(e.time)
              this.seriesData.push(e.value)

              this.listLoading = false
              // console.log(e)
            });

            // this.drawEcharts()

            }
        })
      }
    },
    dateChange(){
      this.buttonDisabled = false
      // console.log(this.tags)
    },
  },
  mounted() {

    //this.listLoading = true

    this.tags =  []

    getTendItem()
    .then(response => {
      this.tags = response.data
      this.listLoading = false
    })

    window.addEventListener("resize", () => {
      // 判断是否存在，直接调用resize方法
      // if (this.myChart){
      //   this.myChart.resize()
        console.log("resize.")
      // }
      // this.drawEcharts();
    })
  }
};

</script>

<style scoped>

.label {
  margin: 10px;
  font-size: large;
}
.date{
  margin: 10px;
  width: 500px;
}
.button {
  margin: 10px;
  width: 150px;
}
.graf{
  margin: 10px;
}
.select{
  margin: 10px;
  width: 20%;
}

</style>
 -->
 <template>
  <div class="chart-container">
  <el-select class="select" filterable  v-model="currentSelectTag" placeholder="请选择查询数据" style="margin-left: 10px;">
      <el-option
        v-for="item in tags"
        :key="item.address"
        :label="item.desc"
        :value="item.address">
        <span style="float: right; color: #8492a6; font-size: 13px">{{ item.address }}</span>
        <span style="float: left ; color: #1f2d3b; font-size: 13px">{{ item.desc }}</span>
      </el-option>
    </el-select>
    <el-date-picker
      style="margin: 5px;"
      value-format="yyyy-MM-dd HH:mm:ss"
      v-model="value2"
      type="datetimerange"
      :picker-options="pickerOptions"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      align="right">
    </el-date-picker>
    <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
        查询
    </el-button>
    <el-button v-waves class="filter-item" type="primary" icon="el-icon-refresh" >
        实时数据
    </el-button>
    <chart ref="chart" height="95%" width="100%" />
  </div>
</template>

<script>
import Chart from '@/components/Charts/Line'
import { timeAgo } from '@/filters';
import { title } from '@/settings';

export default {
  name: 'LineChart',
  components: { Chart },
  data(){
    return {
      data: {
        xAxisData: [],
        seriesData: [],
        title: '',
        unit: ''
      },
      pickerOptions: {
          shortcuts: [{
            text: '最近一小时',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 1);
              picker.$emit('pick', [start, end]);
            }
          },{
            text: '最近三小时',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 3);
              picker.$emit('pick', [start, end]);
            }
          },{
            text: '最近一天',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三天',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
        value2: '',
        startTime: '',
        endTime: '',
    }
  },
  methods: {
    handleFilter() {
      this.data.xAxisData.push('14:32:25')
      this.data.seriesData.push(Math.floor(Math.random() * 100) + 1)
      this.data.title = '实际压力',
      this.data.unit = 'bar'
      //调用子组件的方法
      this.$refs.chart.updateChart(this.data)
      console.log(`startTime:${this.value2[0]} endTime:${this.value2[1]}`)
    },
    handleOnline(){
      console.log('online')
    }
  },
}
</script>

<style scoped>
.chart-container{
  position: relative;
  width: 100%;
  height: calc(100vh - 84px);
}
</style>

